<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RapidOCR Demo</title>
    <link rel=stylesheet type="text/css" href="{{url_for('static', filename='css/main.css')}}">
    <link rel="shortcut icon" href="/static/css/favicon.ico" type="image/x-icon"/>
</head>
<body>
    <h1 align="center">
        RapidOCR Demo &nbsp;
        <a href="https://github.com/RapidOCR/RapidOCR" style="font-size: 14px;">欢迎Star</a>
    </h1>
    <div class='area'>
        <span class="uplodNote">图片文件类型支持PNG、JPG、JPEG、BMP，图片大小不超过3M。</span>
        <span class="btn-gen" onclick="javascript:$('#rapid_ocr').click();">试试你的图片？</span>
        <input type="file" style="display: none;" name="pic" id="rapid_ocr"/>
    </div>
    <br/>
    <div class="area">
        <div class="leftarea" id="detectDiv">
            <span class="span_title">文本检测结果</span><br/><br/>
            <div class="wrapper" id="wrapper" hidden></div>
            <img id="detect_img" src=""/>
        </div>

        <div class="rightarea" id="recogDiv">
            <span id="rec_res" class="span_title">文本识别结果</span>
            <br/> <br/>
            <table id="locTable" class="table" cellspacing="0" cellpadding="5"></table>
        </div>
    </div>
    <script src="{{url_for('static', filename='js/jquery-3.0.0.min.js')}}"></script>
    <script type="text/javascript">
        // 页面加载时，执行
        window.onload = function () {
            $('#detect_img').attr("width", "");
            $('#detect_img').attr("height", "");
        }

        $("#rapid_ocr").change(function(){
            let file = document.getElementById("rapid_ocr").files[0];

            // 判断图像格式是否匹配
            let imageName = file.name;
            let index = imageName.lastIndexOf('.');
            let extName = imageName.substr(index + 1);
            let imgArr = ['jpg', 'bmp', 'png', 'jpeg'];
            if (!(imgArr.includes(extName.toLocaleLowerCase()))){
                alert("图像文件格式不支持！");
                return;
            }

            // 判断图像大小是否符合
            let imageSize = file.size / 1024 / 1024;
            if (imageSize >= 3) {
                alert("图像大小超过3M！");
                return;
            }

            var reader = new FileReader();
            reader.onload = function(e){
                var upload_data = {"file": reader.result};
                $.ajax(
                {
                    url:"/ocr",
                    type:"POST",
                    data: JSON.stringify(upload_data),
                    contentType: 'application/json; charset=UTF-8',
                    dataType: 'json',

                    beforeSend:function(){
                        $("#detect_img").attr('src', reader.result);
                        $("#detect_img").attr("width", "95%");
                        $("#detect_img").attr("height", "100%");

                        $("#wrapper").show();
                        $("#locTable").hide();
                        $("#rec_res").html("文本识别结果");
                    },

                    success:function (data) {
                        $("#wrapper").hide();
                        if (data){
                            if (data['image']){
                                $("#detect_img").attr('src', 'data:image/jpeg;base64,'+ data['image']);
                                $('#detect_img').show();
                            }
                            if (data["elapse"]){
                                document.getElementById("rec_res").textContent = "文本识别结果(耗时:" + String(data['elapse']) + "s)"
                                $("#rec_res").show();
                            }
                            if (data["rec_res"]){
                                var rec_res = JSON.parse(data["rec_res"]);

                                // 绘制整个结果表格
                                var data = "";
                                data += "<tr>" +
                                            '<th bgcolor="#C0C0C0">序号</th>' +
                                            '<th bgcolor="#C0C0C0">识别结果</th>' +
                                            '<th bgcolor="#C0C0C0">置信度</th>' +
                                        "</tr>"
                                for (let i = 0; i < rec_res.length; i++) {
                                    const element = rec_res[i];
                                    let num = element[0];

                                    let rec_result = element[1];

                                    let score = Number(element[2]);
                                    score = score.toFixed(4);

                                    data += "<tr>"
                                    data += "<td>" + num + "</td>";
                                    data += "<td align='left'>" + rec_result + "</td>";
                                    data += "<td>" + score + "</td>";
                                    data += "</tr>"
                                }
                                document.getElementById("locTable").innerHTML = data;
                                $("#locTable").show();
                            }
                        }

                    }
                }
            );
            }
            reader.readAsDataURL(this.files[0])
        });
    </script>
</body>
</html>